<template>
  <div class="bg-grey " id="workLog">
    <van-tabs v-model="activeTab" sticky animated swipeable >
      <van-tab v-for="(tab, index) in tabs" :key="index" :title="tab.name" class="margin-t-10">
        <div class="tab-panel" :ref="tab.list">
          <van-pull-refresh v-model="isLoading" @refresh="showList(tab.page, tab.finished, tab.type, tab.list, true, false)">
          <img
            slot="loading"
            class="loading-gif-refresh"
            src="../../assets/loading.gif"
          >
          <template v-if="getDataFiled(tab.list).length == 0">
            <div class="no-data-img">
              <img src="../../assets/meeting/no-data.png">
              <p>暂无相关数据</p>
            </div>
          </template>
          <van-list
            v-if="getDataFiled(tab.list).length > 0"
            v-model="loading"
            :finished="getDataFiled(tab.finished)"
            finished-text="没有更多了"
            :immediate-check="false"
            @load="showList(tab.page, tab.finished, tab.type, tab.list, false, false)"
          >
            <van-cell-group >
              <van-cell v-for="(item, i) in getDataFiled(tab.list)" :key="i" :title="item.title" :label="item.date" title-class="left-class" label-class="desc-class" 
              @click="toDetail(item.id)"/>
            </van-cell-group>
          </van-list>
          </van-pull-refresh>
        </div>
      </van-tab>
    </van-tabs>
    <div class="bottom-btn">
      <van-button type="info" size="large" @click="addLog">写日志</van-button>
    </div>
  </div>
</template>
<script type="text/javascript">
  export default {
    data() {
      return {
        activeTab: 0,
        isLoading: false,
        loading: false,

        tabs:[{
          name: "个人日志",
          page: 'personPage',
          finished: 'personFinished',
          type: '1',
          list: 'personList'
        },{
          name: "工作日志",
          page: 'workPage',
          finished: 'workFinished',
          type: '2',
          list: 'workList'
        }],
        
        personFinished: false,
        personList: [],
        personPage: 1,

        workFinished: false,
        workList: [],
        workPage: 1
      }
    },
    activated() {
      this.$bridge.callHandler('navTitle', {title: '工作日志'})
      this.showList('personPage', 'personFinished', '1', 'personList', true, true)
      this.showList('workPage', 'workFinished', '2', 'workList', true, true)

      setTimeout(_ => {
        this.$bridge.registerHandler('navBackClicked', (data,responseCallback) => {
          responseCallback('h5 done!')
        })
      },300)
    },
    mounted() {
      
    },
    methods:{
      /**
       * 列表
       * @param  {[type]} page     [description]
       * @param  {[type]} finished [description]
       * @param  {[type]} type     [description]
       * @param  {[type]} target   [数据]
       * @param  {[type]} init     [description]
       * @return {[type]}          [description]
       */
      showList(page, finished, type, target, init, showToast) {
        let self = this
        if(init) {
          self[page] = 1
          self.finished = false
        }
        let config = {
          method: "post",
          url: `${self.$common.basePath}attendance.php`,
          data: {
            do: 'blogalist',
            user_id: self.$store.state.userId || 18,
            type: type,
            page: self[page]++
          }
        }
        if(showToast) {
          self.$toast({
            duration: 0,
            forbidClick: true,
            className: 'loading-toast',
            icon: require('../../assets/loading.gif'),
          })
        }
        if(!self[finished] || init) {
          self.$axios(config).then(res => {
            self.loading = false
            self[target] = init?res.data.data : self[target].concat(res.data.data)
            if(self[target].length >= res.data.count) {
              self[finished] = true
            }
            self.isLoading = false
            self.$toast.clear()
          }).catch(err => {
            self.loading = false
            self.isLoading = false
            self.$toast.clear()
            self[finished] = true
          })
        }
      },
      getDataFiled(dataFiled) {
        return this[dataFiled]
      },
      /**
       * 详情
       * @return {[type]} [description]
       */
      toDetail(id) {
        this.$router.push({name: 'logDetail', query:{ editId: id, status:'check' }})
      },
      /**
       * 写日志
       */
      addLog() {
        this.$router.push({ name: 'addJournal', query:{ status:'add',active: this.activeTab + 1 } })
      }
    }
  }
</script>
<style type="text/css" lang="less" scoped>
  .margin-t-10{
    margin-top: 10px;
  }
  .padding-b-56 {
    padding-bottom: 56px;
  }
  .bottom-btn{
    position: fixed;
    bottom: 0;
    width: calc(100vw - 30px);
    padding: 3px 15px;
    background-color: #fff;
  }
  .left-class{
    color: #333333;
    font-weight: bold;
  }
  .desc-class{
    color: #999999;
    font-size: 14px;
    margin-top: 0;
    font-weight: 400;
  }
  .no-data-img {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 40% 0;
    background-color: #f5f5f5;

    img {
      width: 180px;
      height: 106px;
      text-align: center;
    }

    p{
      font-size: 17px;
      color: #333333
    }
  }
</style>
<style type="text/css" lang="less">
  #workLog{
    height: calc(100vh - 50px);
    background: #f5f5f5;
    -webkit-overflow-scrolling: touch;
    .tab-panel {
      -webkit-overflow-scrolling: touch;
      // height: calc(100vh - 110px);
      // overflow-y: auto;
      background: #f5f5f5;

      .van-list {
        min-height: calc(100vh - 110px);
      }
    }
    .van-tabs__wrap{
      padding: 0 60px;
      background-color: #fff;
    }
    .van-tabs__line{
      width: 40px!important;
    }
    .van-tab {
      color: #999999;
    }
    .van-tab--active{
      color: #2E79FF;
      font-weight: 600;
    }
    .van-cell{
      line-height: 35px;
      padding: 10px 15px 15px 15px;
    }
    .van-button {
      border-radius: 4px;
    }
    .van-tabs__content {
      min-height: calc(100vh - 54px)
    }
  }
</style>